<template>
  <div class="Showcase1">
    <div class="Showcase1-top">
      <img
        class="Showcase1-top-left"
        :src="publicUrls + 'free/style1/Showcase2Topleft.png?imageView2/format/webp'"
        alt=""
      />
      <div class="Showcase1-top-center">
        <div class="Showcase1-top-center-child"></div>
      </div>
      <img
        class="Showcase1-top-right"
        :src="publicUrls + 'free/style1/Showcase2TopRight.png?imageView2/format/webp'"
        alt=""
      />
    </div>
    <div class="Showcase1-center">
      <img
        class="Showcase1-center-left"
        :src="publicUrls + 'free/style1/Showcase2Centerleft.png?imageView2/format/webp'"
        alt=""
      />
      <div
        class="Showcase1-center-center"
        :style="{
          backgroundImage: `url(${publicUrls + 'free/style1/Showcase2CenterCenter.png?imageView2/format/webp'})`,
        }"
      ></div>
      <img
        class="Showcase1-center-right"
        :src="publicUrls + 'free/style1/Showcase2CenterRight.png?imageView2/format/webp'"
        alt=""
      />
    </div>
    <div class="Showcase1-btm"></div>
  </div>
</template>   

<script lang="ts">
export default defineComponent({
  name: 'style1',
});
</script>
  
<script setup lang="ts">
import { publicUrls } from '@/utils/minxin';
import { defineComponent } from 'vue';
</script>  

<style scoped lang="less">
.Showcase1 {
  display: flex;
  flex-direction: column;
  align-items: center; 
  width: 100%; 
  height: calc(100% - 12px);
  min-width: 2.575rem;
  // min-height: 4.375rem;
}
.Showcase1-top {
  display: flex;
  // max-height: calc(100% - 140px);
  height: calc(100% - 140px);
  width: calc(100% - 45px);

  .Showcase1-top-left {
    width: auto;
    height: 100%;
  }
  .Showcase1-top-center {
    display: flex;
    width: 100%;
    height: auto;
    background: rgba(254, 243, 223, 1);
    .Showcase1-top-center-child {
      width: 40%;
      height: 100%;
    }
  }
  .Showcase1-top-right {
    width: auto;
    height: 100%;
  }
}
.Showcase1-center {
  display: flex;
  width: 100%;
  height: 33px;
  .Showcase1-center-left {
    width: 5px;
    height: 33px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .Showcase1-center-center {
    flex: 1;
    background-repeat: repeat;
    background-size: auto 100%;
  }
  .Showcase1-center-right {
    width: 5px;
    height: 33px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
.Showcase1-btm {
  height: 103px;
  width: calc(100% - 60px);
  background: rgba(85, 59, 42, 1);
}
</style>